<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>view-tree</title>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../js/bootstrap-treeview.css" />
		<script src="../js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap-treeview.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<style>
			.tree {
				min-height: 20px;
				padding: 19px;
				margin-bottom: 20px;
				background-color: #fbfbfb;
				border: 1px solid #999;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
				-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
				-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05)
			}

			.tree li {
				list-style-type: none;
				margin: 0;
				padding: 10px 5px 0 5px;
				position: relative
			}

			.tree li::before,
			.tree li::after {
				content: '';
				left: -20px;
				position: absolute;
				right: auto
			}

			.tree li::before {
				border-left: 1px solid #999;
				bottom: 50px;
				height: 100%;
				top: 0;
				width: 1px
			}

			.tree li::after {
				border-top: 1px solid #999;
				height: 20px;
				top: 25px;
				width: 25px
			}

			.tree li span {
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				border: 1px solid #999;
				border-radius: 5px;
				display: inline-block;
				padding: 3px 8px;
				text-decoration: none
			}

			.tree li.parent_li>span {
				cursor: pointer
			}

			.tree>ul>li::before,
			.tree>ul>li::after {
				border: 0
			}

			.tree li:last-child::before {
				height: 30px
			}

			.tree li.parent_li>span:hover,
			.tree li.parent_li>span:hover+ul li span {
				background: #eee;
				border: 1px solid #94a0b4;
				color: #000
			}

			.icon-plus-sign {
				display: inline-block;
				width: 16px;
				height: 16px;
				background: url('../Images/bg/ico_small.png') left -44px no-repeat;
			}

			.icon-minus-sign {
				display: inline-block;
				width: 16px;
				height: 16px;
				background: url('../Images/bg/ico_small.png') left 0px no-repeat;
			}

			.tree li::before,
			.tree li::after {}

			.tree li::before {}

			.tree li::after {}
			
			.icon-plus-sign{display:inline-block;width:16px;height:16px;background:url('../Images/bg/ico_small.png') left -44px no-repeat;}
			.icon-minus-sign{display:inline-block;width:16px;height:16px;background:url('../Images/bg/ico_small.png') left 0px no-repeat;}
		
		</style>
		<div class="tree well">
			<ul>
				<li>
					<span><i class="icon-plus-sign"></i> Parent</span><a href="">Goes somewhere</a>
					<ul>
						<li>
							<span><i class="icon-plus-sign"></i> Child</span> <a href="">Goes somewhere</a>
							<ul>
								<li>
									<span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a>
								</li>
							</ul>
						</li>
						<li>
							<span><i class="icon-plus-sign"></i> Child</span> <a href="">Goes somewhere</a>
							<ul>
								<li>
									<span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a>
								</li>
								<li>
									<span><i class="icon-plus-sign"></i> Grand Child</span> <a href="">Goes somewhere</a>
									<ul>
										<li>
											<span><i class="icon-plus-sign"></i> Great Grand Child</span> <a href="">Goes somewhere</a>
											<ul>
												<li>
													<span><i class="icon-leaf"></i> Great great Grand Child</span> <a href="">Goes somewhere</a>
												</li>
												<li>
													<span><i class="icon-leaf"></i> Great great Grand Child</span> <a href="">Goes somewhere</a>
												</li>
											</ul>
										</li>
										<li>
											<span><i class="icon-leaf"></i> Great Grand Child</span> <a href="">Goes somewhere</a>
										</li>
										<li>
											<span><i class="icon-leaf"></i> Great Grand Child</span> <a href="">Goes somewhere</a>
										</li>
									</ul>
								</li>
								<li>
									<span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a>
								</li>
							</ul>
						</li>
					</ul>
				</li>

				<li>
					<span><i class="icon-plus-sign"></i> Parent2</span> <a href="">Goes somewhere</a>
					<ul>
						<li>
							<span><i class="icon-leaf"></i> Child</span> <a href="">Goes somewhere</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			var d = true;
			$(function() {
				$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
				$('.tree li.parent_li > span').on('click', function(e) {
					var d = $(this).siblings('ul').is(":visible");
					$(this).siblings('ul').slideToggle('fast'); //.siblings('dt').css('background-position','right -40px');
					if (d) {
						console.log($(this).find(">i"));
						$(this).find(">i").addClass('icon-minus-sign').removeClass('icon-plus-sign');

					} else {
						//  $(this).find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
						$(this).find(">i").addClass('icon-plus-sign').removeClass('icon-minus-sign');
					}
					e.stopPropagation();
				});
			});
		</script>

	</body>
</html>
